<template>
  <div class="page-container">
    <!--订单信息-->
    <div class="order-detail-wrap">
      <div class="order-content">
        <el-form label-position="left" :inline="true" label-width="100px">
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
              <span class="label">售后单编号：</span>
              <span class="value">{{val_data.afterSalesOrderNumber}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">售后类型：</span>
              <span class="value">{{val_data.afterSalesType}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">售后申请时间：</span>
              <span class="value">{{val_data.aftersalesApplicationTime}}</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
              <span class="label">售后单状态：</span>
              <span class="value">{{val_data.aftersalesOrderStatus}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">售后完成时间：</span>
              <span class="value">{{val_data.completeTime}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">申请人：</span>
              <span class="value">{{val_data.applyName}}</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
              <span class="label">申请来源：</span>
              <span class="value">{{val_data.applyTypez == 0 ? "前端申请":"后台申请"}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">销售商家：</span>
              <span class="value">{{val_data.sellers}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">销售店铺名称：</span>
              <span class="value">{{val_data.sellersName}}</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
              <span class="label">销售渠道：</span>
              <span class="value">{{val_data.saleWays}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">订单编号：</span>
              <span class="value">{{val_data.orderNo}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">订单创建时间：</span>
              <span class="value">{{val_data.orderTime}}</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
              <span class="label">订单状态：</span>
              <span class="value">{{val_data.aftersalesOrderStatus}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">订单类型：</span>
              <span class="value">{{val_data.orderType}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">下单会员账号：</span>
              <span class="value">{{val_data.orderMemberAccountNumber}}</span>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="8">
              <span class="label">收货人手机：</span>
              <span class="value">{{val_data.receivePhone}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">收货人：</span>
              <span class="value">{{val_data.receivelinkman}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">收货人地址：</span>
              <span class="value">{{val_data.receiveDetailAddress}}</span>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- tab明细部分 -->
      <div class="order-tab-container">
        <el-tabs v-model="tabActive" type="card" @tab-click="handleClick">
          <!-- 售后单明细 -->
          <el-tab-pane label="售后单明细" name="first">
            <AfterSalesOrderDetail
              :orderNo="orderNo"
              :goodsId="goodsId"
              :afterSaleNo="afterSaleNo"
              :val_data="val_data"
              :goodsData="goodsData"
              :auditResult="auditResult"
              :remarks="remarks"></AfterSalesOrderDetail>
          </el-tab-pane>
          <!-- 订单支付明细 -->
            <el-tab-pane label="订单支付明细" name="second">
              <!-- 订单明细 -->
              <orderDetailPay :order-no="orderNo"></orderDetailPay>
          </el-tab-pane>
          <!-- 退款明细 -->
          <el-tab-pane label="退款明细" name="third">
          <!-- 订单明细 -->
          <AfterSalesOrderRefuedDetail
          :refundStatus="refundStatus"
          :refundAmountOfAftersalesOrder="refundAmountOfAftersalesOrder"
          :aftersalesOrderRefundAmountOfGoldPowder="aftersalesOrderRefundAmountOfGoldPowder"
          :compensationRefundAmount="compensationRefundAmount"
          :afterData="afterData"></AfterSalesOrderRefuedDetail>
          </el-tab-pane>
          <!-- 售后单日志 -->
          <el-tab-pane label="售后单日志" name="fourth">
            <AftersaleOrderLog :afterSaleNo="afterSaleNo"></AftersaleOrderLog>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 返回按钮 -->
    <!--    <div class="back">-->
    <!--      <el-button type="primary" @click="back">返回</el-button>-->
    <!--    </div>-->
  </div>
</template>

<script>
  import orderDetailPay from '../Pages/orderDetailsPages/OrderDetailPay'
  import AfterSalesOrderDetail from "./component/AftersaleOrderDetail";
  import AfterSalesOrderDetailPay from "./component/AftersaleOrderDetailPay";
  import AfterSalesOrderRefuedDetail from "./component/AftersaleOrderRefuedDetail";
  import AftersaleOrderLog from "./component/AftersaleOrderLog";
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  const after_sale_types = [{name:"全部",code:null},{name:"仅退款未发货",code:1},{name:"仅退款已发货",code:2},{name:"退款退货",code:3}];
  const after_sale_status = [{name:"全部",code:null},
    {name:"申请退款待处理",code:1010},
    {name:"取消售后",code:1020},
    {name:"审核通过",code:1030},
    {name:"审核拒绝",code:1040},
    {name:"审核后取消售后",code:1050},
    {name:"退款中",code:1060},
    {name:"退款成功",code:1070},
    { name: "换货待处理", code: 1080 },
    { name: "换货已收货", code: 1090 },
    { name: "换货已发货", code: 1100 }];
  const send_back_types = [{name:"全部",code:null},{name:"上门取件",code:1},{name:"快递寄回",code:2}];

  export default {
    data() {
      return {
        val_data: {},
        tabActive: 'first',      // tab选项卡
        aftersalesOrderNumber: "R2001081645300685231",
        aftersalesType: "仅退款未发货",
        aftersalesApplicationTime: "2020-01-11 00:03:27",
        aftersaleStatus: "已完成",
        aftersalesCompletionTime: "2020-01-11 00:05:20",
        applicant: "张大龙",
        sourceOfApplication: "前台申请",
        seller: "建投自营商家",
        sellerName: "自营店铺",
        saleWays: "BBC",
        orderNumber: "200111519639879409",
        orderCreationTime: "2020-01-11 00:02:28",
        orderStatus: "已关闭",
        orderType: "无仓",
        orderMemberAccountNumber: "18706179807",
        consigneePhone: "18706179807",
        consignee: "张大龙",
        receivingAddress: "Shanghai-Shanghai City-Huangpu District-11111",
        reason: "多拍",
        applyDescription: "多拍商品，申请退货",
        orderCode: "E2020011598732455",
        auditTime: "",
        auditResult: "",
        refundAmountOfAftersaleGoods: "200",
        remarks: "",
        amountPayable: "2002",
        amountPaid: "2000",
        payWays: "网上支付",
        payStatus: "已支付",
        refundStatus: "退款完成",
        refundAmountOfAftersalesOrder: "200",
        aftersalesOrderRefundAmountOfGoldPowder: "0.00",
        compensationRefundAmount: "0.00",
        afterSaleNo:'',
        orderNo:"",
        goodsId:'',
        // 商品明细数据
        goodsData: [
          {
            picture: '商品主图',
            picture: '商品主图',
            name: '儿童读物',
            code: 'UT0031',
            serialNumber: '001',
            combo: '十万个为什么',
            sku: '全套餐',
            unit: '希望小学',
            number: '200',
            price: '2000',
            applyNumber: '20',
            purchasePrice: '200',
            applyPrice: '200',
            note: '退货',
          },
        ],
        // 订单支付明细数据
        ordreData: [
          {
            timetype: '微信公众号',
            money: '200',
            time: '2020-01-11',
            serialNumber: '001',
          },
        ],
        // 退款明细数据
        afterData: [

        ],
        // 查询条件
        formInline: {
          user: '',
          region: '',
          data: '',
        },
        //售后单日志
        logData: [

        ]
      };
    },
    components: {
      orderDetailPay,
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog,
      AfterSalesOrderDetail,
      AfterSalesOrderDetailPay,
      AfterSalesOrderRefuedDetail,
      AftersaleOrderLog
    },
    // props: ["val_data"],
    mounted() {
      //获取订单状态和类型
      let this_ = this;
      // 获取传过来的记录no
      var afterSaleNo = this.$route.params.afterSaleNo;
      this_.afterSaleNo = afterSaleNo;
      this.utils.request.queryPageOrderAfterSaleApplyDetail({"afterSaleNo": afterSaleNo}, function (res) {
        if (res.code == '0000') {
          let applyData ={};
          let data = res.data;
          let applyStatus = after_sale_status.find(function (statusItem, index) {
            return statusItem.code == data.status;
          });
          let saleType = after_sale_types.find(function (saleTypeItem, index) {
            return saleTypeItem.code == data.afterSaleType;
          });
          let sendBack = send_back_types.find(function (sendBackItem, index) {
            return sendBackItem.code == data.sendBackType;
          });
          applyData.afterSalesOrderNumber = data.afterSaleNo;
          applyData.afterSalesType = typeof(saleType)=="undefined" ? "" : saleType.name;
          applyData.aftersalesOrderStatus = applyStatus.name;
          applyData.methodOfReturnOfApplication = typeof(sendBack)=="undefined" ? "" : sendBack.name;
          applyData.aftersalesApplicationTime = data.applyTime;
          applyData.amountOfRefundRequestedByTheAftersalesOrder = data.returnRealAmount;
          applyData.auditTime = data.applyTime;
          applyData.returnGoodsOrnot = data.afterSaleType == 3 ? '是' : '否';
          applyData.methodOfReturnOfApplication = data.afterSaleType == 3 ? '快递寄回' : '';
          applyData.returnStatus = data.afterSaleType == 3 && data.status == 1070 ? "是" : "";
          applyData.completeTime = data.applyTime;
          applyData.actualRefundAmount = data.returnRealAmount;
          applyData.orderNo = data.orderNo;
          applyData.saleWays = 'BBC';
          applyData.receiveDetailAddress = data.receiveDetailAddress;
          applyData.orderTime = data.orderTime;
          applyData.applyName = data.applyName;
          applyData.receivePhone = data.receivePhone;
          applyData.orderMemberAccountNumber = data.memberId;
          applyData.sellers = data.merchantName;
          applyData.sellersName = data.storeName;
          applyData.receivelinkman = data.receiveLinkman;
          applyData.goodsId = data.goodsId;
          applyData.orderNo = data.orderNo;
          this_.val_data = applyData;
          this_.orderNo = data.orderNo;
          this_.goodsId = data.goodsId;
        }
      });


      // this.utils.request.queryOrderInfo({"orderNo": this_.val_data.orderNo}, function (res) {
      //   if (res.code == "0000") {
      //     switch (res.data.orderStatus) {
      //       case 1:
      //         //初始化、确认收货、已完成、已关闭
      //         this_.orderStatus = '初始化';
      //         break;
      //       case 2:
      //         this_.orderStatus = '确认收货';
      //         break;
      //       case 3:
      //         this_.orderStatus = '已完成';
      //         break;
      //       case 4:
      //         this_.orderStatus = '已关闭';
      //         break;
      //       default:
      //         this_.orderStatus = res.data.orderStatus;
      //     }
      //
      //   }
      // });

      //获取订单支付信息
      this.utils.request.getOrderPay({"parentOrderNo": this.val_data.orderNo}, function (res) {
        if (res.code == "0000") {
          this_.amountPayable = res.data[0].payTotalAmount;
          this_.amountPaid = res.data[0].payTotalAmount - res.data[0].lavePayTotalAmount;
          switch (res.data[0].payType) {
            case 1:
              //网上支付.线下支付
              this_.payWays = "网上支付";
              break;
            case 2:
              this_.payWays = "线下支付";
              break;
            default:
              this_.payWays = res.data[0].payType;
          }
          switch (res.data[0].payStatus) {
            case 1:
              //待支付、已支付、已关闭、部分支付（
              this_.payStatus = "待支付";
              break;
            case 2:
              this_.payStatus = "已支付";
              break;
            case 3:
              this_.payStatus = "已关闭";
              break;
            case 4:
              this_.payStatus = "部分支付";
              break;
            default:
              this_.payStatus = res.data[0].payStatus;
          }
          this_.ordreData = res.data.map((item) => {
            let orderItem = {};
            orderItem.type = this_.payWays;
            orderItem.money = this_.amountPayable;
            orderItem.time = res.data[0].payTime;
            orderItem.serialNumber = res.data[0].orderPayNo;
            return orderItem;
          });
        }
      });
    },

    methods: {
      handleClick() {
      },
      ckeck() {

      },
      back() {
        this.$emit("sendChildData")
      },
    }
  };
</script>

<style scoped lang="scss">
  /deep/
  .el-tabs__header {
    padding-bottom: 0;
  }

  /* 共用布局 */
  .label {
    display: inline-block;
    width: 30%;
    text-align: right;
    font-size: 14px;
  }

  .value {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
  }

  /* tab部分 */
  .order-detail-wrap {
    border: 1px solid #ccc;
    width: 100%;
    height: auto;
    padding: 10px;
    box-sizing: border-box;

    .order-content {
      border: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
    }

    /* tab切换部分 */
    .order-tab-container {
      margin-top: 10px;

      .goods-detail {
        margin-top: 10px;
        border: 1px solid #ccc;
        padding-bottom: 10px;
      }
    }

    .tab-title {
      text-align: left;
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      height: 30px;
      line-height: 30px;
      font-weight: 600;
      font-size: 14px;
      padding-left: 20px;
      box-sizing: border-box;
    }
  }

  /* 返回按钮 */
  .back {
    margin-top: 20px;
  }
</style>
